<template>
	<view>
		<view class="h_20rpx"></view>
		<!-- <mescroll-body ref="mescrollRef" :height="windowHeight+'rpx'" @init="mescrollInit" @down="downCallback"
			@up="upCallback" :up="upOption" :down="downOption">
			<block v-for="(item,index) in list" :key="index">
				<view class="list-public">
					<view class="display-a margin-bottom_30rpx">
						<image class="avatar" :src="item.user.avatar_thumb.url_list[4]"></image>
						<view>
							<view class="font-size_32rpx font-weight_bold margin-bottom_10rpx">{{item.user.nickname}}</view>
							<view class="font-size_26rpx color_999999">{{item.create_time}}</view>
						</view>
					</view>
					<view class="font-size_30rpx color_c6c6c6">{{item.text}}</view>
				</view>
			</block>
		</mescroll-body> -->
		<mescroll-body ref="mescrollRef" :height="windowHeight+'rpx'" @init="mescrollInit" @down="downCallback"
			@up="upCallback" :up="upOption" :down="downOption">
			<block v-for="(item,index) in list" :key="index">
				<view class="list-public p-bo" v-if="tabId==1">
					<view class="display-a margin-bottom_20rpx">
						<image class="img" :src="item.user.avatar_thumb.url_list[4]"></image>
						<view style="width: 550rpx;">
							<view class="font-size_30rpx margin-bottom_10rpx">{{item.user.nickname}}</view>
							<view class="font-size_24rpx color_999999">{{item.create_time}}</view>
						</view>
					</view>
					<view class="display-a">
						<view style="width: 112rpx;"></view>
						<view>
							<view class="margin-bottom_20rpx">{{item.text}}</view>
							<view v-if="item.comments">
								<view class="list-public reply-content" v-for="(list,index) in item.comments"
									:key="index">
									<view class=" ">
										<view class="display-a margin-bottom_20rpx">
											<!-- <image src="" mode=""></image> -->
											<image class="imgs" :src="item.user.avatar_thumb.url_list[4]"></image>
											<view style="width: 550rpx;">
												<view class="font-size_30rpx margin-bottom_10rpx">{{item.user.nickname}}
												</view>
												<view class="font-size_24rpx color_999999">{{item.create_time}}</view>
											</view>
										</view>
										<view class="display-a">
											<view style="width: 112rpx;"></view>
											<view>
												<view class="margin-bottom_20rpx font-overflow">{{item.content}}</view>

											</view>
										</view>
									</view>
								</view>
							</view>
							<!-- <view v-else class="reply " @click="getBatch(item)">回复</view> -->
						</view>
					</view>
				</view>
				<view class="list-public p-bo" v-if="tabId==3">

					<view class="display-a margin-bottom_20rpx">
						<image class="img" :src="item.user_info.image"></image>
						<view style="width: 550rpx;">
							<view class="font-size_30rpx margin-bottom_10rpx">{{item.user_info.nickname}}</view>
							<view class="font-size_24rpx color_999999">{{item.create_time}}</view>
						</view>
					</view>
					<view class="display-a">
						<view style="width: 112rpx;"></view>
						<view>
							<view class="margin-bottom_20rpx">{{item.content}}</view>
							<view v-if="item.sub_comments.length">
								<view class="list-public reply-content" v-for="(list,index) in item.sub_comments"
									:key="index">
									<view class=" ">
										<view class="display-a margin-bottom_20rpx">
											<!-- <image src="" mode=""></image> -->
											<image class="imgs" :src="list.user_info.image"></image>
											<view style="width: 550rpx;">
												<view class="font-size_30rpx margin-bottom_10rpx">
													{{list.user_info.nickname}}
												</view>
												<view class="font-size_24rpx color_999999">{{list.create_time}}</view>
											</view>
										</view>
										<view class="display-a">
											<view style="width: 112rpx;"></view>
											<view>
												<view class="margin-bottom_20rpx font-overflow">{{list.content}}</view>

											</view>
										</view>
									</view>
								</view>
							</view>
							<!-- <view v-else class="reply " @click="getBatch(item)">回复</view> -->
						</view>
					</view>

				</view>
			</block>
		</mescroll-body>
		<sunui-popup ref="pop2">
			<template v-slot:content>
				<view class="display-a-js padding_30rpx">
					<view></view>
					<view class="color_FF0000" @click="closeBatch()">关闭</view>
				</view>
				<view style="padding: 34rpx;">
					<view class="font-size_32rpx font-weight_bold margin-bottom_30rpx">回复内容</view>
					<input type="text" class="input-name" maxlength="400" placeholder="请输入回复内容"
						placeholder-class="placeholder" v-model="replyContent" />
					<view class="list-but" @click="getReply()">确认回复</view>
				</view>
			</template>
		</sunui-popup>

	</view>
</template>

<script>
	export default {
		data() {
			return {

				imgUrl: this.$imgUrl,

				// 下拉配置项
				downOption: {
					auto: false
				},
				// 上拉配置项
				upOption: {
					auto: false
				},

				list: [],

				windowHeight: '',

				tabId: '', ////1抖音 2快手 3视频号 4小红书
				id: '',
				replyContent: '',
				isWhether: true, //判断重复点击

			}
		},

		onLoad() {
			//获取系统信息
			uni.getSystemInfo({
				success: res => {
					this.windowHeight = res.windowHeight * 2 - 30;
				}
			})
		},

		onShow() {
			let pagearr = getCurrentPages(); //获取应用页面栈
			let currentPage = pagearr[pagearr.length - 1]; //获取当前页面信息
			if (currentPage.options.tabId) {
				this.tabId = currentPage.options.tabId;
				this.id = currentPage.options.id;
				this.$nextTick(() => {
					this.mescroll.resetUpScroll();
				});
			} else {
				this.$nextTick(() => {
					this.mescroll.resetUpScroll();

				});
			}
		},

		methods: {
			//更多
			getBatch(obj) {
				console.log(obj)
				this.listObj = obj;
				this.$refs.pop2.show({
					style: 'background-color:#fff;width:750rpx;height:auto;border-radius: 20px 20px 0 0;',
					anim: 'bottom',
					position: 'bottom',
					shadeClose: false,
				});
			},
			closeBatch() {
				this.$refs.pop2.close();
			},

			async getReply() {
				let data
				if (!this.replyContent) {
					this.$sun.toast("请输入回复内容", 'none');
					return;
				}

				if (!this.isWhether) {
					return;
				}
				this.isWhether = false;

				// this.listObj.content = this.replyContent;
				if (this.tabId == 1) {
					data = {
						text: this.replyContent,
						video_id: this.id,
						uid: uni.getStorageSync("uid"),
						reply_id: this.tabId == 1 ? this.listObj.reply_id : this.listObj.note_id

					}
				} else {
					data = {
						content: this.replyContent,
						video_id: this.id,
						uid: uni.getStorageSync("uid"),
						comment_id: this.tabId == 1 ? this.listObj.reply_id : this.listObj.id

					}
				}

				const result = await this.$http.post({
					url: this.tabId == 1 ? this.$api.dyReplyComment : this.$api.xhsReplyComment,
					data: data
				});
				if (result.errno == 0) {
					this.$sun.toast(result.msg);
					setTimeout(() => {
						this.replyContent = '';
						this.$refs.pop2.close();
						this.isWhether = true;
						this.$nextTick(() => {
							this.mescroll.resetUpScroll();
						});
					}, 2000);
				} else {
					this.isWhether = true;
					this.$sun.toast(result.messgae, 'none');
				}
			},

			async upCallback(scroll) {


				let getUrl = '';
				let getData = '';

				if (this.tabId == 1) {
					getUrl = this.$api.dyCommentList;
					getData = {
						video_id: this.id,
						uid: uni.getStorageSync("uid"),
						cursor: scroll.num - 1,
						count: 12
					}
				}

				if (this.tabId == 3) {
					getUrl = this.$api.xhsCommentList;
					getData = {
						video_id: this.id,
						uid: uni.getStorageSync("uid"),
						cursor: scroll.num - 1,
						count: 12
					}
				}

				const result = await this.$http.post({
					url: getUrl,
					data: getData
				});
				if (result.errno == 0) {
					if (this.tabId == 1) {
						this.mescroll.endByPage(result.data.comments.length, result.data.cursor);
						if (scroll.num == 1) this.list = [];
						this.list = this.list.concat(result.data.comments);
						for (let i = 0; i < this.list.length; i++) {
							this.list[i].create_time = this.timestampToDate(this.list[i].create_time);


							this.dySubCommentList(this.list[i].cid)
						}
					} else {
						this.mescroll.endByPage(result.data.response_body.data.comments.length, 10);
						if (scroll.num == 1) this.list = [];
						this.list = this.list.concat(result.data.response_body.data.comments);
						for (let i = 0; i < this.list.length; i++) {
							result.data.response_body.data.comments[i].create_time = this.timestampToDate(result.data
								.response_body.data.comments[i].create_time);
							if (result.data.response_body.data.comments[i].sub_comments.length) {

								// console.log(this.formatTimestamp(result.data.response_body.data.comments[i].sub_comments.create_time))
								result.data.response_body.data.comments[i].sub_comments[i].create_time = this
									.formatTimestamp(result.data.response_body.data.comments[i].sub_comments[i]
										.create_time);
							}

							// this.dySubCommentList(this.list[i].cid)
						}
						// this.$sun.message(result.data.msg,'none')

						console.log(this.list)
					}

				} else {
					this.mescroll.endByPage(0, 0);
					this.list = []
					this.$sun.toast(result.message, 'none')
					console.log('测试')
				}
			},
			async dySubCommentList(cid) {
				const result = await this.$http.post({
					url: this.$api.dySubCommentList,
					data: {
						video_id: this.id,
						uid: uni.getStorageSync("uid"),
						cursor: 0,
						count: 10,
						comment_id: cid
					}
				});
				if (result.errno == 0) {
					// console.log(result)
					if (result.comments) {
						this.list.forEach((item) => {
							item.comments = result.comments ? result.comments : []
						})


						console.log(this.list)
						this.$sun.toast(result.message);
					}


				} else {
					this.$sun.toast(result.message, 'none');
				}
			},

			formatTimestamp(timestampMs) {
				// 确保传入的时间戳是一个数字
				if (isNaN(timestampMs)) {
					return 'Invalid timestamp';
				}

				// 将时间戳转换为 Date 对象
				const date = new Date(parseInt(timestampMs, 10));

				// 获取年月日时分
				const year = date.getFullYear();
				const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份是从 0 开始的，+1 使其从 1 开始
				const day = String(date.getDate()).padStart(2, '0');
				const hours = String(date.getHours()).padStart(2, '0');
				const minutes = String(date.getMinutes()).padStart(2, '0');

				// 格式化输出
				return `${year}-${month}-${day} ${hours}:${minutes}`;
			},

			timestampToDate(timestamp) {
				let dateObj
				if (this.tabId == 3) {
					dateObj = new Date((timestamp * 1000) / 1000);
				} else {
					dateObj = new Date((timestamp * 1000));
				}
				let year = dateObj.getFullYear();
				let month = ("0" + (dateObj.getMonth() + 1)).slice(-2);
				let day = ("0" + dateObj.getDate()).slice(-2);
				let hours = ("0" + dateObj.getHours()).slice(-2);
				let minutes = ("0" + dateObj.getMinutes()).slice(-2);
				let seconds = ("0" + dateObj.getSeconds()).slice(-2);

				return `${year}-${month}-${day} ${hours}:${minutes}`;
			}

		}
	}
</script>

<style lang="less">
	.list-but {
		width: 600rpx;
		background-color: #0E8FF3;
		padding: 24rpx;
		font-size: 30rpx;
		font-weight: bold;
		text-align: center;
		color: #FFFFFF;
		margin-left: 42rpx;
	}

	.input-name {
		width: 640rpx;
		border: 1px solid #EBEBEB;
		border-radius: 10rpx;
		padding: 30rpx 20rpx;
		margin-bottom: 40rpx;
	}

	.reply-content {
		width: 550rpx;
		// background-color: #F1F1F1;
		color: #666;
		border-radius: 10rpx;
		padding: 10rpx 20rpx;
	}

	.reply {
		width: 110rpx;
		text-align: center;
		background-color: #F1F1F1;
		color: #999;
		padding: 6rpx;
		border-radius: 10rpx;
	}

	.matrix-8 {
		width: 96rpx;
		height: 96rpx;
		position: fixed;
		right: 14rpx;
		bottom: 180rpx;
		z-index: 99;
	}

	.img {
		width: 92rpx;
		height: 92rpx;
		border-radius: 50%;
		margin-right: 20rpx;
	}

	.imgs {
		width: 121rpx;
		height: 92rpx;
		border-radius: 50%;
		margin-right: 20rpx;
	}

	page {
		background-color: #FFF;
	}
</style>